require('./PageLsgdjcDetail.less');
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Map,Marker } from 'react-amap';
import { Button,Page, Panel,PanelHeader, PanelBody, PanelFooter,ButtonArea,
  MediaBox,Cells, Cell,CellHeader,MediaBoxTitle,MediaBoxHeader,
  MediaBoxDescription,MediaBoxBody,MediaBoxInfo,MediaBoxInfoMeta,
  CellBody,CellFooter,Toast, Form,FormCell,Radio,Gallery,GalleryDelete,
  Uploader,TextArea,ActionSheet,Flex,FlexItem,NavBar,NavBarItem} from  'react-weui/build/packages'
import {Control} from 'react-keeper';

class LsgdjcDetail extends React.Component {

  constructor(props) {
    super(props);
    this.setPmTab = this.setPmTab.bind(this);
    this.setZaoyinTab = this.setZaoyinTab.bind(this);
    this.amapEvents = {
      created: (mapInstance) => {
        Actions.setMapInstance(mapInstance);
      }
    };
  }

  setPmTab() {
    Actions.setPmTab();
  }

  setZaoyinTab() {
    Actions.setZaoyinTab();
  }

  render() {
    return (
      <Page className="page" infiniteLoader={false} ptr={false}>
        <Cells style={{
          marginTop:0
        }}>
          <Cell>
            <CellBody>
              {this.state.lsgdjcDetail.city}
            </CellBody>
            <CellFooter>
              {this.state.lsgdjcDetail.todayTime}更新
            </CellFooter>
          </Cell>
        </Cells>

        <div style={{height:300,zIndex:'1',position:'flex'}}>
          <Map amapkey={'5bb1467495c46464737e970b64ea5d68'} dragEnable={true} zoomEnable={true}
               showBuildingBlock={true} zoom={15} zooms={[11,20]} center={this.state.lsgdjcDetail.position}
               doubleClickZoom={true} events={this.amapEvents}>
            {
              this.state.lsgdjcDetail.markers.map((item, i)=> {
                return (
                  <Marker position={{
                  longitude: item.lng,
                  latitude:  item.lat
                }}>
                    <div className="markerA"></div>
                  </Marker>
                )
              })
            }
          </Map>
        </div>

        <NavBar style={{
          position:"relative",
          marginTop:20
        }}>
          <NavBarItem active={this.state.lsgdjcDetail.tab == 1} onClick={this.setPmTab}>PM2.5</NavBarItem>
          <NavBarItem active={this.state.lsgdjcDetail.tab == 2} onClick={this.setZaoyinTab}>噪音</NavBarItem>
        </NavBar>
        <table width="100%" height="100%" style={{
          marginTop:10
        }}>
          <thead style={{
            fontSize:17,
            backgroundColor:"#EBEBEB",
            color:"#CFCFCF"
          }}>
          <tr>
            <th>序号</th>
            <th>检测站点</th>
            <th>等级</th>
            <th>指数</th>
          </tr>
          </thead>
          <tbody style={{
            textAlign:"center"
          }}>
          {
            this.state.lsgdjcDetail.districtAvg.map((item, i)=> {
              return (
                <tr height={40}>
                  <td width={"10%"} className="borderstyle">{i + 1}</td>
                  <td width={"48%"} className="borderstyle">{item.district}</td>
                  {this.state.lsgdjcDetail.tab == 1 ?
                    <td width={"20%"} className="borderstyle">
                      {item.pmTwo >= 0 && item.pmTwo < 50 ? '优' :
                        item.pmTwo >= 50 && item.pmTwo < 100 ? '良' :
                          item.pmTwo >= 100 && item.pmTwo < 150 ? '轻度污染' :
                            item.pmTwo >= 150 && item.pmTwo < 200 ? '中度污染' :
                              item.pmTwo >= 200 && item.pmTwo < 300 ? '重度污染' :
                                item.pmTwo >= 300 && item.pmTwo <= 500 ? '严重污染' :
                                  '未知'}
                    </td> :
                    <td width={"20%"} className="borderstyle">
                      {item.tsp >= 0 && item.tsp < 40 ? '优' :
                        item.tsp >= 40 && item.tsp < 80 ? '良' :
                          item.tsp >= 80 && item.tsp < 120 ? '轻度污染' :
                            item.tsp >= 120 && item.tsp < 160 ? '中度污染' :
                              item.tsp >= 160 && item.tsp < 200 ? '重度污染' :
                                item.tsp >= 200 ? '严重污染' :
                                  '未知'}
                    </td>
                  }
                  <td width={"20%"}
                      className="borderstyle">{this.state.lsgdjcDetail.tab == 1 ? item.pmTwo : item.tsp}</td>
                </tr>
              )
            })
          }
          </tbody>
        </table>
      </Page>
    );
  }

  componentWillMount() {
    if (Control.state) {
      Actions.loadData(Control.state.city);
    }
  }

  componentDidMount() {

  }

  componentWillReceiveProps(nextProps) {

  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.lsgdjcDetail || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      console.log(Object.keys(thisState).length, Object.keys(nextState).length);
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        console.log(thisState[key], nextState[key]);
        return true;
      }
    }
    return false;
  }

}

ReactMixin.onClass(LsgdjcDetail, Reflux.connect(Store, 'lsgdjcDetail'));


export default LsgdjcDetail ;
